@import '../../css/Variable.styl'

.timeline
  display flex
  flex-direction column
  height "calc(100% - %s)" % headerHeight
  & p:first-child
    margin-top 0
    padding-top 0
  & p:last-child
    margin-bottom 0
    padding-bottom 0
  &__messagelist
    flex 1 1 auto
    margin-bottom 0
    padding standardSpacing standardSpacing 0
    overflow-y auto
    overflow-x visible
    > .ScrollToBottomContents
      display flex
      flex-direction column
    &__showMoreButton
      margin-inline-start auto
      margin-inline-end auto
      margin-block-end standardSpacing
    &__item
      position relative
      margin textSpacing 0
      width 100%
      & + .revision
        border none
      &:last-child
        margin-bottom 0
  &__warning
      position absolute
      width calc(100% - 20px)
      padding-inline-start textSpacing
      z-index 1
  &__texteditor
    position relative
    flex 0 1 auto
    margin standardSpacing
  &__participate
    background-color var(--appTypeColor)
    color offWhite
    width fit-content
    width -moz-fit-content
    padding standardSpacing
    border-radius standardBorderRadius
    align-self flex-end
    margin-top textSpacing
    & > i
      margin-inline-end textSpacing
    &:hover
      background-color var(--appTypeDarkColor)
      color offWhite

.tox-btn-group:not(:first-child)
  border-inline-start none!important //remove the left borders of the wysiwyg for a better aesthetic result

// INFO - CH - 2020-05-12 - this overrides the "height: auto" of tinymce to fix responsive issue https://github.com/tracim/tracim/issues/3026
.tox-container:not(.tox-fullscreen) .tox-edit-area
  height 100px

// MEDIAQUERIES

columnTimeline()
  .timeline
    display flex
    flex-direction column
    margin 0
    flex 1
    width 100%
    &__header
      flex-direction row
      width 100%
      height 50px
      cursor auto
      &__icon
        display none
      &__title
        display flex
        justify-content center
        align-items center
        transform none
        width 100%

@media (min-width: min-lg) and (max-width: max-lg)
  columnTimeline()

@media (min-width: min-md) and (max-width: max-md)
  columnTimeline()

@media (min-width: min-sm) and (max-width: max-sm)
  columnTimeline()

@media (max-width: max-xs)
  columnTimeline()
  .timeline
    height 100%
    &__messagelist
      overflow visible
      &__version__date
        font-size metadataFontSize
    & .commentArea__advancedtext__btn
      display none
